<template>
  <el-table
    v-el-table-infinite-scroll="load"
    v-loading="loading"
    :data="list"
    :infinite-scroll-disabled="disabled"
    :infinite-scroll-immediate="false"
    heigth="450"
    style="width: 100%"
    class="box-container"
  >
    <el-table-column label="老人名字" align="center" min-width="120" fixed>
      <template slot-scope="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="性别" align="center" min-width="80" fixed>
      <template slot-scope="scope">
        <el-tag :type="scope.row.sex === '0' ? 'primary': 'danger'">
          {{ scope.row.sex ==='0' ? '男' : '女' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="测量时间" min-width="180" align="center">
      <template slot-scope="scope">
        {{ scope.row.measurementTime }}
      </template>
    </el-table-column>
    <el-table-column label="血压" width="100" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.bloodPressure >= 80 && scope.row.bloodPressure <= 120 ? 'success': 'danger'">
          {{ scope.row.bloodPressure }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="血糖" width="100" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.bloodSugar >= 3.9 && scope.row.bloodSugar <= 6.1 ? 'success': 'danger'">
          {{ scope.row.bloodSugar }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="血脂胆固醇" width="100" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.bloodFatCholesterol >= 2.8 && scope.row.bloodFatCholesterol <= 5.2 ? 'success': 'danger'">
          {{ scope.row.bloodFatCholesterol }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="血脂甘油三酯" width="120" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.bloodFatTriglyceride <= 1.7 ? 'success': 'danger'">
          {{ scope.row.bloodFatTriglyceride }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="心率" width="100" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.heartRate >= 60 && scope.row.heartRate <= 80 ? 'success': 'danger'">
          {{ scope.row.heartRate }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="尿酸" width="100" align="center">
      <template slot-scope="scope">
        <el-tag :type="(scope.row.uricAcid <= 420 && scope.row.sex ==='0')||(scope.row.uricAcid <= 360 && scope.row.sex !=='0') ? 'success': 'danger'">
          {{ scope.row.uricAcid }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="肺活量" width="100" align="center">
      <template slot-scope="scope">
        <el-tag :type="(scope.row.vitalCapacity >= 3500 && scope.row.sex ==='0')||(scope.row.vitalCapacity >= 2500 && scope.row.sex !=='0') ? 'success': 'danger'">
          {{ scope.row.vitalCapacity }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="是否通知家属" width="120" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.pushStatus === '1' ? 'success': 'danger'">
          {{ scope.row.pushStatus === '1' ? '已通知' : '未通知' }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getDangerElder } from '@/api/dashBoard'
import elTableInfiniteScroll from 'el-table-infinite-scroll'
export default {
  name: 'DangerElderlyList',
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      disabled: false,
      loading: true,
      list: null,
      isLoading: false
    }
  },
  created() {
    this.getDangerElderList()
  },
  methods: {
    getDangerElderList() {
      this.loading = true
      this.isLoading = true
      getDangerElder(this.queryParams).then(res => {
        this.list = res
        this.loading = false
        this.isLoading = false
        if (res.length < this.queryParams.pageSize) {
          this.disabled = true
        }
      })
    },
    async load() {
      this.queryParams.pageNum += 1
      if (!this.isLoading) {
        this.isLoading = true
        this.loading = true
        await getDangerElder(this.queryParams).then(res => {
          this.list.concat(res)
          this.isLoading = false
          this.loading = false
          if (res.length < this.queryParams.pageSize) {
            this.disabled = true
          }
        })
      }
    }
  }
}
</script>
<style scoped lang="less">
    .title:hover{
        color: #3a8ee6;
        cursor: pointer;
    }
    .box-container{
    }
    .box-container::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    .box-container::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0,0,0,0.2);
    }
    .box-container::-webkit-scrollbar-track {
      border-radius: 0;
      background: rgba(0,0,0,0.1);
    }
</style>
